<template>
  <div>
    <el-dialog title="发布买单" v-model="editVisible" width="780px" top="20vh" :close-on-click-modal="false"
      @close="handleclose">
      <el-form>
        <el-form-item :required="true">
          <div>
            <el-row :gutter="22" class="demo-autocomplete text-center">
              <el-col :span="12">
                <div class="sub-title my-2 text-sm text-gray-600">
                  <span style="color: red">*</span><span class="fontSize20">碳需求量</span>
                  <span class="describe_name">需10000吨起，含手续费（吨）</span>
                </div>
                <el-input placeholder="请输入碳需求量" v-model="add_from.amount" @input="handleAountBlur"></el-input>
              </el-col>
              <el-col :span="12">
                <div class="sub-title my-2 text-sm text-gray-600">
                  <div style="display: flex; align-items: center">
                    <el-popover placement="bottom" :width="500" trigger="click">
                      <template #reference>
                        <div class="cursorp">
                          <span style="color: red">*</span><span class="fontSize20">实际到手碳量</span>
                          <i class="el-alert__icon el-icon-warning"></i>
                        </div>
                      </template>
                      <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="交易手续费"> {{ tradingRateValue }}%</el-form-item>
                        <!-- <div v-for="(item, index) in TradingList" :key="index">
                          <div class="display-space-between">
                            <el-form-item
                              :label="'第' + Number(index + 1) + '档'"
                            >
                              <div class="displayflex">
                                <el-input
                                  placeholder=""
                                  disabled
                                  v-model="item.smallValue"
                                ></el-input
                                >~
                                <el-input
                                  placeholder=""
                                  disabled
                                  v-model="item.bigValue"
                                >
                                  <template #append>吨 </template>
                                </el-input>
                              </div>
                            </el-form-item>
                            <el-form-item label="，手续费">
                              <el-input
                                placeholder=""
                                disabled
                                v-model="item.tradeFees"
                              ></el-input>
                            </el-form-item>
                          </div>
                        </div> -->
                      </el-form>
                    </el-popover>
                  </div>
                </div>
                <el-input placeholder="交易手续费" disabled v-model="add_from.actual_amount"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="22" class="demo-autocomplete text-center margintop30">
              <el-col :span="12">
                <div class="sub-title my-2 text-sm text-gray-600">
                  <span style="color: red">*</span><span class="fontSize20">委托单价</span>
                  <span class="describe_name">系统建议价格参考，可自行编辑</span>
                </div>
                <el-input placeholder="请输入委托单价" v-model="add_from.price" @input="handleEntrusted">
                  <template #append>元</template></el-input>
              </el-col><el-col :span="12">
                <div class="sub-title my-2 text-sm text-gray-600">
                  <span style="color: red">*</span><span class="fontSize20">预计支付</span>
                  <span class="describe_name">系统建议价格参考，可自行编辑</span>
                </div>
                <el-input placeholder="预计支付" disabled v-model="add_from.Entrustedprice">
                  <template #append>元</template></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="21" class="text-center margintop30">
              <el-col :span="23">
                <div class="sub-title my-2 text-sm text-gray-600">
                  <span style="color: red">*</span><span class="fontSize20 marginrRight20">名称</span>
                  <!-- <el-radio-group
                      v-model="add_from.benefitType"
                      @change="handleRadio"
                    >
                      <el-radio :label="1" v-if="enterpriseInfo.state == 1"
                        >单位</el-radio
                      >
                      <el-radio :label="2">个人</el-radio>
                    </el-radio-group> -->
                </div>
                <div class="displayflex align-items">
                  <el-input placeholder="请输入名称" disabled v-model="add_from.merchant">
                  </el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div>
            <el-checkbox v-model="add_from.is_read" size="large"></el-checkbox>

            我已阅读并同意林业碳汇认定流转平台
            <span class="blue cursorp" @click="handleAgreement(1)">《服务协议》 </span><span class="blue cursorp"
              @click="handleAgreement(2)">《隐私保护政策》</span>
          </div>
          <div class="btn_b">
            <el-button @click="handleclose" class="icon-search1">取消</el-button>
            <el-button type="primary" class="icon-search" @click="handleSaveEdit">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getEnterpriseInfo } from "../assets/js/common";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    var userInfojson = localStorage.getItem("userInfo");
    const userInfo = JSON.parse(userInfojson);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const router = useRouter();
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    const add_from = reactive({
      amount: null,
      price: null,
      Entrustedprice: null,
      benefitType: 1,
      merchant: null,
      identity: null,
      phone: null,
      actual_amount: null,
      is_read: false,
    });
    const enterpriseInfo = ref({});
    const handleSelect = (res) => {
      console.log(res);
    };
    const handleSaveEdit = () => {
      context.emit("handleSaveEdit", add_from);
    };
    const handleAgreement = (index) => {
      console.log(index);
      router.push("./agreement");
    };
    const handleSetPaymentTerm = () => {
      router.push("./receivingSet");
    };
    const tradingRate = ref("");
    const tradingRateValue = ref("");
    const getConfigValue = () => {
      api
        .getListAPI(
          "trade/client/trade/config/getConfigValue/TRANSACTION_FEES_PERCENTAGE",
          {}
        )
        .then((res) => {
          if (res.data.code == 1) {
            // console.log(res.data.data);
            tradingRate.value = res.data.data;
            let serviceChargeRate = res.data.data * 100;
            // 百分比带有小数点则保留两位小数
            if ((serviceChargeRate + '').indexOf('.') != -1) {
              tradingRateValue.value = (serviceChargeRate).toFixed(2);
            } else {
              tradingRateValue.value = serviceChargeRate;
            }
          } else {
            ElMessage.error(res.data.message);
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getConfigValue();
    const handleAountBlur = () => {
      // console.log(TradingList.value);
      // for (var i = 0; i < TradingList.value.length; i++) {
      //   if (
      //     add_from.amount >= TradingList.value[i].smallValue &&
      //     add_from.amount <= TradingList.value[i].bigValue
      //   ) {
      //     add_from.actual_amount = (
      //       Number(add_from.amount) - Number(TradingList.value[i].tradeFees)
      //     ).toFixed(2);
      //   }
      // }
      add_from.actual_amount = (
        Number(add_from.amount) - Number(Number(add_from.amount) * tradingRate.value)
      ).toFixed(2);
      if (add_from.price) {
        add_from.Entrustedprice = (
          Number(add_from.price) * Number(add_from.amount)
        ).toFixed(2);
      }
    };
    const handleEntrusted = () => {
      add_from.Entrustedprice = (
        Number(add_from.price) * Number(add_from.amount)
      ).toFixed(2);
    };
    getEnterpriseInfo().then((res) => {
      // console.log(res);
      enterpriseInfo.value = res;
      // if (enterpriseInfo.value.state == 1) {
      //   add_from.merchant = res.name;
      //   add_from.benefitType = 1;
      // } else {
      //   add_from.benefitType = 2;

      // }
      add_from.merchant = userInfo.realName;
      add_from.phone = userInfo.phone;
      add_from.identity = userInfo.idNum;
    });
    const handleRadio = (res) => {
      console.log(res);
      if (res == 1) {
        getEnterpriseInfo().then((res) => {
          console.log(res);
          add_from.merchant = res.name;
          add_from.phone = res.operatorMobile;
          add_from.identity = userInfo.idNum;
        });
      } else {
        add_from.merchant = userInfo.realName;
        add_from.phone = userInfo.phone;
        add_from.identity = userInfo.idNum;
      }
    };
    return {
      add_from,
      router,
      tradingRateValue,
      editVisible,
      enterpriseInfo,
      handleclose,
      handleSelect,
      handleSaveEdit,
      handleAgreement,
      handleSetPaymentTerm,
      handleAountBlur,
      handleEntrusted,
      handleRadio,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/common.less";

&:deep(.el-dialog) {
  box-shadow: none;
}

&:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #909399;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 360px;
  font-size: 30px;
}

.btn_b {
  margin-top: 40px;
}

.container {
  border: 0px;
}

.el-input__inner {
  width: 100% !important;
  border-radius: 0 !important;
}

&:deep(.el-input__inner) {
  border-radius: 0 !important;
}

.demo-autocomplete {
  margin-right: 20px;
  padding-right: 30px;
}

.el-select {
  width: 90%;
}
</style>
